﻿<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  layout:decorate="~{layout}">
<head>
</head>
<body>
	<div class="wrapper" layout:fragment="content">
		<!--Breadcrumb Area Start-->
		<div class="breadcrumb-area">
		    <div class="container">
		        <div class="row">
		            <div class="col-12">
		                <div class="breadcrumb-content text-center">
                            <h1 class="breadmome-name">购物车</h1>
		                    <ul>
		                        <li><a href="/">返回主页</a></li>
		                        <li class="active">购物车</li>
		                    </ul>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!--Breadcrumb Area End-->
	    <!--Shopping Cart Area Strat-->
		<div class="Shopping-cart-area mt-80">
		    <div class="container">
		        <div class="row">
		            <div class="col-12">
		                    <div class="table-content table-responsive">
		                        <table class="table">
		                            <thead>
		                                <tr>
											<th class="picaboo-product-thumbnail">选择</th>
		                                    <th class="picaboo-product-thumbnail">商品</th>
		                                    <th class="cart-product-name">名字</th>
		                                    <th class="picaboo-product-price">单价</th>
		                                    <th class="picaboo-product-quantity">数量</th>
		                                    <th class="picaboo-product-subtotal">总价</th>
											<th class="picaboo-product-remove">删除</th>
		                                </tr>
		                            </thead>
		                            <tbody th:each="cart:${carts}" >

										<tr th:attr="data-id=${cart.commodityCartId}">
											<td >
												<input class="check-item" name="" type="checkbox" style="height: 20px;width: 20px">
											</td>

											<td class="picaboo-product-thumbnail"><a href="#"><img style="width: 100px;height: 100px;" th:src="@{${cart.commodityMainImg}}" alt=""></a></td>
											<td class="picaboo-product-name"><a href="" th:text="${cart.commodityName}" class="product-name">Cras neque metus</a></td>
											<td class="picaboo-product-price">￥<span class="price" th:text="${cart.commodityPrice}">$60.50</span></td>
											<td class="picaboo-product-quantity">
												<input value="2" class="quantity" min="0" type="number" th:value="${cart.number}" name="number" >

											</td>
											<td class="product-subtotal">￥<span class="amount" th:text="${cart.commodityPrice*cart.number}">$60.50</span></td>
											<td class="picaboo-product-remove"><a href="javascript:;" class="cartDel" th:attr="data-id=${cart.commodityCartId}"><i class="fa fa-times"></i></a></td>
										</tr>

		                            </tbody>
		                        </table>
		                    </div>

		                    <div class="row">

		                        <div class="col-md-5 ml-auto" style="position: absolute ;margin-left: 50px">

									<div class="cart-page-total" style="margin-top: -20px">
		                                <h3>购物车</h3>
		                                <ul>
		                                    <!--<li>Subtotal <span>$130.00</span></li>-->

		                                    <li>共计： ￥<span class="totalAmount">0.00</span></li>
		                                </ul>

		                            </div>

		                        </div>

								<div class=" cart-page-total" style="margin-left: 80%; margin-bottom: 2%">
									<a href="javascript:;" id="checkout">结算</a>
								</div>

		                    </div>

		            </div>
		        </div>
		    </div>
		</div>

	</div>
</body>
</html>
